<template>
  <div class="loginConfigContent">
    <el-form :model="record" :label-width="lang === 'zh'?'150px':'290px'" label-position="left" ref="form" :rules="rules" :style="lang === 'zh'?'':'width:550px;'">
      <el-form-item :label="$t('管理员登录安全策略')">
        <el-switch :width="lang === 'zh'?60:70" v-model="status" @change="loginConfigStatusChange(status)" class="status switch" active-color="#009966" inactive-color="#CCCCCC" active-value="enable" inactive-value="disable" :active-text="$t('启用')" :inactive-text="$t('停用')" />
      </el-form-item>
      <el-form-item :label="$t('登录失败鉴别时间范围')" prop="checking_sec">
        <el-input v-emoji v-model="record.checking_sec" ref="checkingSec" :placeholder="$t('请输入1-3600的数字')" :style="lang === 'zh'?'width:215px;':'width:250px;'" size='small'>
          <template slot="append">{{$t('秒')}}</template>
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('登录失败鉴别次数')" prop="failed_count">
        <el-input v-emoji v-model="record.failed_count" ref="failedCount" :placeholder="$t('请输入2-20的数字')" :style="lang === 'zh'?'width:215px;':'width:250px;'" size='small'>
          <template slot="append">{{$t('次')}}</template>
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('登录失败IP锁定时间')" prop="banned_sec">
        <el-input v-emoji v-model="record.banned_sec" ref="bannedSec" :placeholder="$t('请输入1-86400的数字')" :style="lang === 'zh'?'width:215px;':'width:250px;'" size='small'>
          <template slot="append">{{$t('秒')}}</template>
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('密码有效期')" prop="password_day">
        <el-input v-emoji v-model="record.password_day" ref="passwordDay" :placeholder="$t('请输入1-365的数字')" :style="lang === 'zh'?'width:215px;':'width:250px;'" size='small'>
          <template slot="append">{{$t('天')}}</template>
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('登录超时自动退出时间')" prop="link_sec">
        <el-input v-emoji v-model="record.link_sec" ref="linkSec" :placeholder="$t('请输入30-3600的数字')" :style="lang === 'zh'?'width:215px;':'width:250px;'" size='small'>
          <template slot="append">{{$t('秒')}}</template>
        </el-input>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="logSave" class="application">{{$t('应 用')}}</el-button>
  </div>
</template>
<script>
import { getSysconf, editSwitch, editConfInfo } from '@/api/system/adminConfig/loginConfig'
import { inputClass } from '@/utils/input-class.js'
export default {
  name: 'LoginConfig',
  data () {
    var validateCheckingSec = (rule, value, callback) => {
      if (!String(value).trim()) {
        callback(new Error(this.$t('不能为空')))
      } else if (!this.isInteger(value)) {
        callback(new Error(this.$t('只能输入整数')))
      } else if (value < 1 || value > 3600) {
        callback(new Error(this.$t('请输入1-3600范围内的值')))
      } else {
        callback()
      }
    }
    var validateFailedCount = (rule, value, callback) => {
      if (!String(value).trim()) {
        callback(new Error(this.$t('不能为空')))
      } else if (!this.isInteger(value)) {
        callback(new Error(this.$t('只能输入整数')))
      } else if (value < 2 || value > 20) {
        callback(new Error(this.$t('请输入2-20范围内的值')))
      } else {
        callback()
      }
    }
    var validateBannedSec = (rule, value, callback) => {
      if (!String(value).trim()) {
        callback(new Error(this.$t('不能为空')))
      } else if (!this.isInteger(value)) {
        callback(new Error(this.$t('只能输入整数')))
      } else if (value < 1 || value > 86400) {
        callback(new Error(this.$t('请输入1-86400范围内的值')))
      } else {
        callback()
      }
    }
    var validatePasswordDay = (rule, value, callback) => {
      if (!String(value).trim()) {
        callback(new Error(this.$t('不能为空')))
      } else if (!this.isInteger(value)) {
        callback(new Error(this.$t('只能输入整数')))
      } else if (value < 1 || value > 365) {
        callback(new Error(this.$t('请输入1-365范围内的值')))
      } else {
        callback()
      }
    }
    var validateLinkSec = (rule, value, callback) => {
      if (!String(value).trim()) {
        callback(new Error(this.$t('不能为空')))
      } else if (!this.isInteger(value)) {
        callback(new Error(this.$t('只能输入整数')))
      } else if (value < 30 || value > 3600) {
        callback(new Error(this.$t('请输入30-3600范围内的值')))
      } else {
        callback()
      }
    }
    return {
      status: 'enable',
      lang: this.$i18n.locale,
      record: {
        banned_sec: 0,
        checking_sec: 0,
        failed_count: 0,
        link_sec: 0,
        password_day: 0
      },
      rules: {
        checking_sec: [{ required: false, trigger: 'blur', validator: validateCheckingSec }],
        failed_count: [{ required: false, trigger: 'blur', validator: validateFailedCount }],
        banned_sec: [{ required: false, trigger: 'blur', validator: validateBannedSec }],
        password_day: [{ required: false, trigger: 'blur', validator: validatePasswordDay }],
        link_sec: [{ required: false, trigger: 'blur', validator: validateLinkSec }]
      }
    }
  },
  created () {
    getSysconf().then(res => {
      if (res.status === 0) {
        this.record = Object.assign(this.record, res.info[0])
        this.status = res.info[0].status === 1 ? 'enable' : 'disable'
      }
    })
  },
  mounted () {
    this.$nextTick(() => {
      const data = ['checkingSec', 'failedCount', 'bannedSec', 'passwordDay', 'linkSec']
      inputClass(this.$refs, data)
    })
  },
  methods: {
    loginConfigStatusChange (status, mode) {
      editSwitch({ mode: mode, status: status })
    },
    logSave () {
      this.$refs.form.validate(valid => {
        if (valid) {
          editConfInfo(this.record).then(res => {
            if (res.status === 0) {
              this.$message({
                message: this.$t('保存成功'),
                type: 'success'
              })
            }
          })
        }
      })
    },
    isInteger (value) {
      return (!isNaN(value) && (parseInt(value).toString().length === String(Number(value)).length))
    }
  }
}
</script>
<style lang="less" scoped>
.loginConfigContent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
<style lang="less">
.loginConfigContent {
  .el-form-item {
    margin-bottom: 21px;
    height: 32px !important;
    line-height: 32px !important;
  }
  .el-form-item__content {
    height: 32px !important;
    line-height: 32px !important;
  }
  .el-form-item__label {
    height: 32px !important;
    line-height: 32px !important;
  }
  .el-form-item__error {
    margin-top: 4px;
  }
}
</style>
